
var ListTemplate = React.createClass({
	render:function(){
		var wrapper=this.props.wrapper,
			app=wrapper.props.app,
			isPhone=true,
			router=wrapper.state.router,
			logo=wrapper.state.logo,
			mainTitle=wrapper.state.mainTitle,
			describe=wrapper.state.describe,
			qrCode=wrapper.state.qrCode,
			setting=wrapper.state.setting,
			mixtureMode=wrapper.state.mixtureMode,
			mixtureBackground=wrapper.state.mixtureBackground,
			mixtureColor=wrapper.state.mixtureColor,
			mixtureSpeed=wrapper.state.mixtureSpeed,
			sliderMode=wrapper.state.sliderMode,
			sliderBackground=wrapper.state.sliderBackground,
			sliderColor=wrapper.state.sliderColor,
			sliderSpeed=wrapper.state.sliderSpeed,
			sliderSpeedList=wrapper.sliderSpeedList,
			wallMode=wrapper.state.wallMode,
			wallBackground=wrapper.state.wallBackground,
			wallColor=wrapper.state.wallColor,
			wallSpeed=wrapper.state.wallSpeed,
			wallSpeedList=wrapper.wallSpeedList,
			message=wrapper.state.message,
			actionSheet=wrapper.state.actionSheet,
			confirmOptions=wrapper.state.confirmOptions,
			mainCollection=wrapper.state.mainCollection,
			mainCollectionPure=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo})),
			hotCollection=wrapper.state.hotCollection,
			hotCollectionPure=new CollectionList(_.filter(hotCollection.toJSON(),function(i){ return !i.isVideo})),
			isShowPcMenu=true,
			status=wrapper.state.status,
			mainHtml='';

		switch(router){
			case 'mainList':
				mainHtml=mainCollectionPure.length || !app.mainCollection.complete || !isPhone?<ReactClassOne app={app} isPhone={isPhone} collection={mainCollectionPure} message={message} router={router} />:<MainGuide />;
				break;
			case 'mainListHot':
				mainHtml=<ReactClassOne app={app} isPhone={isPhone} collection={hotCollectionPure} message={message} router={router} />;
				break;
			case 'uploadPhoto':
				mainHtml=<UploadPhoto app={app} describe={describe}  qrCode={qrCode} />;
				break;
			case 'adminAuditing':
				var statusCollection=wrapper.state[(status=='approved'?'main':status)+'Collection'];
				statusCollection=new CollectionList(_.filter(statusCollection.toJSON(),function(i){ return !i.isVideo}));
				mainHtml=<MainList app={app} isPhone={isPhone} collection={statusCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} isAuditing={true} message={message} status={status} />;
				break;
			case 'userSetting':
			case 'userSetname':
			case 'checkPhotos':
			case 'adminSetting':
			case 'outlinkList':
				mainHtml=<Setting app={app} isPhone={isPhone} wrapper={wrapper} />;
				break;
		}

		return (
			<div>
				{isShowPcMenu?<Menu app={app} router={router} logo={logo} mainTitle={mainTitle} status={status} />:''}
				{mainHtml}
				<ActionSheet app={app} actionSheet={actionSheet} />
				<ConfirmDialog app={app} options={confirmOptions} />
			</div>
		)
	}
});

/*horizontal component*/
var ReactClassOne = React.createClass({
    render : function(){
    	var router=this.props.router,
    		isPhone=this.props.isPhone,
    		collection=this.props.collection;

        return (
            <div className="wrpper">
                <div className="main main-Style">
                    <div id="main" className = 'idMainStyle'>
                        {isPhone?<ReactClassTwo />:''}
                        <ReactClassThree collection={collection} router={router} />
                    </div>
                </div>
				{isPhone?<Toolbar />:null}
            </div>
        );
    }
});

var ReactClassTwo = React.createClass({
    render : function(){
        return (
            <div className="positionStyle">
                <div className=" col-xs-12 HeightWidth" >
                    <div className="panel panel-default headerStyle" >
                        <div className="panel panel-default headerStyle " style={{backgroundImage:"url("+background+")"}}></div>
                    </div>
                </div>
            </div>
        );
    }
});

var ReactClassDataListOne = React.createClass({
	getInitialState:function(){
		var model=_.clone(this.props.model);

		this.refresh();

		return {
			time:moment(new Date(_.min([model.timestamp,Date.now()-45000]))).fromNow(),
			isLiking:false,
			is_liked:model.is_liked,
			likes:model.likes
		}
	},
	refresh:function(){
		var model=_.clone(this.props.model);

		this.timer=setTimeout(function(){
			if(ReactDOM.findDOMNode()){
				this.setState({
					time:moment(new Date(_.min([model.timestamp,Date.now()-45000]))).fromNow()
				});
				this.refresh()
			}
		}.bind(this),60000);
	},
	componentWillUnmount:function(){
		clearTimeout(this.timer)
	},
	like:function(){
		var self=this,
			model=this.props.model,
			id=model.id,
			isLiking=this.state.isLiking,
			is_liked=this.state.is_liked,
			url;
		
		if(!isLiking){
			this.setState({
				isLiking:true
			});

			if(!is_liked){
				url='/walls/'+wallId+'/photos/'+id+'/like'
			}else{
				url='/walls/'+wallId+'/photos/'+id+'/unlike'
			}

			$.ajax({
				type:'post',
				url:url,
				dataType:'json',
				success:function(data){
					if(data.success){
						self.setState({
							likes:data.data,
							is_liked:!is_liked,
							isLiking:false
						})
					}
				}
			})
		}
	},
    render : function(){
        var model = this.props.model,
        	likes=this.state.likes,
        	is_liked=this.state.is_liked,
        	time=this.state.time;

        return (
            <div className="divFloatDiv col-xs-12" >
                <div className="panel panel-default pullLeft panen-style-div" >
                    <img className="img-responsive" src={model.photo_url+'?imageView2/4/w/736'} />
                    <img className="source_logo" width="32" height="32" src="/images/icons/weixin.png" />
                    <div className="panel-body style-color">
                        <p>{model.description}</p>
                        <div className="media">
                            <a href="javascript:void(0)" className="media-left">
                                <img className="img-circle avatar" src={model.user.profile_image} />
                            </a>
                            <div className="media-body text-muted" >
                                <span>{model.user.name}</span>
                                <br />
                                <span className="create-time" >{time}</span>
                            </div>
                            <span className="media-right text-right text-muted like" >
                                <i className={is_liked?"glyphicon glyphicon-heart liked":"glyphicon glyphicon-heart-empty"} onClick={this.like} ></i>
                                <span>{likes}</span>
                            </span>
                        </div>
                        <span></span>
                    </div>
                </div>
            </div>
        );
    }
});

var ReactClassThree = React.createClass({
    render : function(){
    	var app=this.props.app,
    		router=this.props.router,
    		collection=this.props.collection;

        return (
            <div>
                <ul className="nav nav-tabs pull-left navStyle list_item col-xs-12">
                    <li className={"navStyleLi "+(router=='mainList'?'navStyleLi-active':'')}><a className="liAStyle" href="#home"><b>{i18next.t('home.timeline.last_posts')}</b></a></li>
                    <li className={"navStyleLi "+(router=='mainListHot'?'navStyleLi-active':'')}><a className="liAStyle" href="#home-hot"><b>{i18next.t('home.timeline.hot_posts')}</b></a></li>
                </ul>

                <div className="tab-content tab-content-style">
                    <div className=" col-xs-12 tab-pane active active-Style">
                        <div className="suibian" id="horizontal-list">
                            {collection.map(function(i,index) {
                            	var model=i.toJSON();
                                return (<div key={model.id} className="divFloatDiv col-xs-12" ><MainListItem isPhone={true} app={app} model={model} backboneModel={i} index={index} /></div>);
                            })}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

function specialScrollBinder(callback){
	$('#horizontal-list').unbind('scroll').bind('scroll',function(){
		var scrollLeft = $('#horizontal-list').scrollLeft();
		var scrollWidth = $(document).width();
		var windowWidth = $('#horizontal-list').width()*$('#horizontal-list>div').length;
		if(scrollLeft + scrollWidth>=windowWidth-50){
			callback()
		}
	}.bind(this));
	return $('#horizontal-list')
}
